<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
			<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	
	<style>
		input[type="range"] {
  /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
  -webkit-appearance: none; /*去除默认样式*/
  margin-top: 42px;
  background-color: #ebeff4;
  /*border-radius: 15px;*/
  width: 80% !important;
  -webkit-appearance: none;
  height:4px;
  padding: 0;
  border: none;

  /*input的长度为80%，margin-left的长度为10%*/
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;/*去除默认样式*/
  cursor: default;
  top: 0;
  height: 20px;
  width: 20px;
  transform: translateY(0px);
  /*background: none repeat scroll 0 0 #5891f5;*/
  background: #fff;
  border-radius: 15px;
  border: 5px solid #006eb3;
  /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
}
	</style>
	<body>
		<input id="snrPollInterval" type="range" min="1" max="30">
	</body>
</html>
<script>
	//滑动时的样式
	$.fn.RangeSlider = function(cfg) {
		this.sliderCfg = {
			min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
			max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
			step: cfg && Number(cfg.step) ? cfg.step : 1,
			callback: cfg && cfg.callback ? cfg.callback : null
		};
		var $input = $(this);
		var min = this.sliderCfg.min;
		var max = this.sliderCfg.max;
		var step = this.sliderCfg.step;
		var callback = this.sliderCfg.callback;

		$input.attr('min', min)
			.attr('max', max)
			.attr('step', step);

		$input.bind("input", function(e) {
			$input.attr('value', this.value);
			$input.css('background', 'linear-gradient(to right, #059CFA, #ebeff4 ' + this.value + '%, #ebeff4)');

			if ($.isFunction(callback)) {
				callback(this);
			}
		});
	};
	$('#snrPollInterval').RangeSlider({
		min: 0,
		max: 100,
		step: 1,
		callback: ''
	}); //#snrPollInterval为input的id名
</script>
